<template>
	<div class="careItem backTop">
		<div class="projectCares clearfix">
			<!-- careBox为单独一个项目卡片 -->
			<div class="careBox" v-for="(item,index) in careDatas" :key="item.indx" @click="goToItemDetial">
				<Card style="width:320px;">
					<div style="text-align:center" class="clearfix">
						<h3>{{item.title}}</h3>
						<!-- <h3>{{item.title}}<span class="ivu-icon ivu-icon-trash-a careDel"></span></h3> -->
						<ul class="careItemUl clearfix">
							<li class="careLis" :title="item.info"><i class="careLisLines careLisLines_blue"></i>{{item.info}}</li>
							<li class="careLis"><i class="careLisLines careLisLines_yellow"></i>{{item.basicsUrl}}</li>
							<li class="careLis"><i class="careLisLines careLisLines_red"></i><img class="creatorPortIcon" v-bind:src="item.creatorPort" alt=""></li>
						</ul>
					</div>
				</Card>
			</div>
		</div>
		<Spin size="large" fix v-if="spinShow"></Spin>
	</div>
</template>

<script>
	export default {
		name: 'itemCare',
		data: function(){
			return {
				careDatas: '',
				spinShow: true //控制loading加载，初始化加载该组件的时候默认是显示加载效果的
			}
		},
		mounted() {
			this.$ajax.get('https://www.easy-mock.com/mock/5a93ac92bf782667fe4c7a32/followTest/project').then(response => {
				// success callback
				this.careDatas = response.data.data.datas
				this.spinShow = false //数据加载成功之后处理掉加载层的遮罩
			}, response => {
				// error callback
				alert('数据加载失败...')
			})
		},
		methods: {
			goToItemDetial: function (){
				// window.location.href = '/home/index/itemsDetails';
				window.open('https://github.com/dongxin001/dongxin001.github.io','_blank');//暂时将单个项目都跳转到GitHub上
			}
		}
	}
	
</script>

<style>
h3{
	margin-bottom: 15px;
	text-align: left;
	position: relative;
}
.careItem{
	width: 100%;
	height: 100%;
}
.projectCares{
	position: relative;
	padding: 20px;
}
.careDel{
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	font-size: 16px;
}
.careBox{
	width: 320px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}
.careLis{
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: left;
	background: #e6e6e6;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin: 0 30px 10px 0;
	padding-left: 10px;
	cursor: pointer;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.creatorPortIcon{
	width: 24px;
	height: 24px;
	border-radius: 5px; 
	margin-top: 8px;
}
.careLisLines{
	width: 3px;
	height: 20px;
	float: left;
	margin: 10px 5px 0 0;
}
.careLisLines_blue{
	background: #2d8cf0;
}
.careLisLines_red{
	background: red;
}
.careLisLines_yellow{
	background: yellowgreen;
}
/*覆盖默认的iview加载层的样式*/
.ivu-spin-large .ivu-spin-dot{
	width: 60px;
	height: 60px;
}
</style>